<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <script src="preview/js/jquery.zySlide.js"></script>
    <title>大数据单模块-借阅排行榜</title>
    <style>
        .rank-img {height: 1.4rem;margin-bottom:0.2rem;}
        .zy-Slide1 {height: 1.4rem;}
        .rank-list ul {width:50%;font-size:0.12rem;color:#bed0ed}
        .rank-list ul li {
            counter-reset: li;
            list-style: none;
            padding-left: 0px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.12rem;
        }
        .rank-list li {line-height: 2;width: 2.1rem; /*这个宽度一般是盒子一半减去10再减去标志的宽*/}
        .rank-list li span {
            /*改这三个*/
            width: 0.14rem;
            height: 0.14rem;
            line-height: 0.14rem;
            /*/////////*/

            coolor: rgba(255, 255, 255, 0.52);
            content: counter(li);
            counter-increment: li;
            background: #7a8aa1;
            text-align: center;
            border-radius: 50%;
            display: inline-block;
            transition: all 0.3s ease-out;
            margin-right: 0.625em;
        }
        .rank-list li:last-child {margin-bottom: 0;}
        .rank-list ul:first-child li:nth-child(1) span { background: #ef2372;}
        .rank-list ul:first-child li:nth-child(2) span { background: #f8d022;}
        .rank-list ul:first-child li:nth-child(3) span {background: #8fcb32;}
        .zy-Slide { position: relative;width: 100%;}
        .zy-Slide ul {
            position: relative;
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .zy-Slide li {
            position: absolute;
            list-style: none;
            background: #000;
            width: 0;
            height: 0;
            z-index: 0;
            cursor: pointer;
            border-radius: 3px;
            margin: 0;
            padding: 0;
        }
        .zy-Slide li img {
            width: 100%;
            height: 100%;
            vertical-align: top;
        }

    </style>
</head>
<body>
    <div class="rank">
        <div class="module-title ycenterbox"><img src="preview/img/listimg.png" /><span class="section_name" data-key="borrow_order_str">借阅排行榜</span></div>
        <div class="rank-content">
            <div class="rank-img zy-Slide zy-Slide1">
                <ul></ul>
            </div>
            <div class="rank-list">
                <ul class="ul-left fl">
                    <li><span>1</span><a class="kp_rank_name">大国的兴衰</a></li>
                    <li><span>2</span><a class="kp_rank_name">2000道最聪明人爱玩的游戏</a></li>
                    <li><span>3</span><a class="kp_rank_name">菩提花开有花落</a></li>
                    <li><span>4</span><a class="kp_rank_name">李嘉诚人生哲学书</a></li>
                    <li><span>5</span><a class="kp_rank_name">史蒂夫·乔布斯管理日记</a></li>
                </ul>
                <ul class="ul-right fr">
                    <li><span>6</span><a class="kp_rank_name">大国的兴衰</a></li>
                    <li><span>7</span><a class="kp_rank_name">2000道最聪明人爱玩的游戏</a></li>
                    <li><span>8</span><a class="kp_rank_name">菩提花开有花落</a></li>
                    <li><span>9</span><a class="kp_rank_name">李嘉诚人生哲学书</a></li>
                    <li><span>10</span><a class="kp_rank_name">史蒂夫·乔布斯管理日记</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script>
    window.onresize = function(){
        pageRem(100,450);
    };
    window.onload = function(){
        pageRem(100,450);
        var gobalAddr="whfw.superlib.com:9025";
        rank_book();
        ///借阅排行榜
        var rank_move_flag=false,rank_str,rankImg_src;
        var websocket_rank;
        var reloadRB = false;//避免重复连接
        function rank_book(){
            var rank_book_names=$('.kp_rank_name');////得到书名描述的所有节点 192.168.1.13:8084
            try{
                websocket_rank=new WebSocket('wss://'+gobalAddr+'/cxts/websocket/borrow_rank');//参数是服务器地址，还有一个参数是自协议可以不写
                websocket_rank.onopen=function(res){
                    heartCheck.reset().start("rank_book");
                    console.log('1借阅排行连接成功');
                };
                websocket_rank.onmessage=function(msg){
                    heartCheck.reset().start("rank_book");
                    var json = JSON.parse(msg.data);
                    var new_rank_str=" ",new_rankImg_src;
                    $.each(json.data,function(i,e){
//                        if(i>=10){
//
//                        }else{
//                            //var rank_show=e.url.indexOf("https");
//                            if(e.url.indexOf("https")==0){
//                                new_rankImg_src=e.url;
//                            }else{
//                                ///说明开头不包含https,要拼接地址
//                                new_rankImg_src='https://'+gobalAddr+e.url;////书封地址拼接
//                            }
//                            new_rank_str+='<li>' +
//                                    '<img src="'+new_rankImg_src+'" />' +
//                                    '</li>';
//                            //$(rank_book_names[i]).html(e.name);////将内容添加到每个书名节点中
//                        }

                        if(i>=7){
                        }else{
                            if(e.url.indexOf("https")==0){
                                new_rankImg_src=e.url;
                            }else{
                                ///说明开头不包含https,要拼接地址
                                new_rankImg_src='https://'+gobalAddr+e.url;////书封地址拼接
                            }
                            new_rank_str+='<li>' +
                                    '<img src="'+new_rankImg_src+'" />' +
                                    '</li>';
                        }
                    });
                    if(new_rank_str==rank_str){
                        rank_move_flag=false;
                        return;
                    }
                    console.log('更新数据？借阅排行数据库更新了' + new Date());
                    rank_move_flag=true;
                    rank_str=" ";
                    $.each(json.data,function(i,e){
//                        if(i>=10){
//
//                        }else{
//                            $(rank_book_names[i]).html(e.name);////将内容添加到每个书名节点中
//                            //var rank_show=e.url.indexOf("https");
//                            if(e.url.indexOf("https")==0){
//                                rankImg_src=e.url;
//                            }else{
//                                ///说明开头不包含https,要拼接地址
//                                rankImg_src='https://'+gobalAddr+e.url;////书封地址拼接
//                            }
//                            rank_str+='<li>' +
//                                    '<img src="'+rankImg_src+'" />' +
//                                    '</li>';
//                            $(rank_book_names[i]).html(e.name);////将内容添加到每个书名节点中
//                        }

                        if(i>=7){
                            if(i<10){
                                $(rank_book_names[i]).html(e.name);////将内容添加到每个书名节点中
                            }else{
                                return;
                            }
                        }else{
                            //var rank_show=e.url.indexOf("https");
                            if(e.url.indexOf("https")==0){
                                rankImg_src=e.url;
                            }else{
                                ///说明开头不包含https,要拼接地址
                                rankImg_src='https://'+gobalAddr+e.url;////书封地址拼接
                            }
                            rank_str+='<li>' +
                                    '<img src="'+rankImg_src+'" />' +
                                    '</li>';
                            $(rank_book_names[i]).html(e.name);////将内容添加到每个书名节点中
                        }

                    });
                    $('.zy-Slide1 ul').html(rank_str);
                    $('.zy-Slide1').zySlide({ speed: 500 }).css('border', '0px solid blue');
                };
                websocket_rank.onclose=function(e){
                    reconnect(reloadRB, "rank_book");
//	        console.log('借阅排行榜服务器端连接已断开！');
//	        $('.zy-Slide1 ul').html('服务器断开未取到数据');
                };
                websocket_rank.onerror = function () {
                    reconnect(reloadRB, "rank_book");
                };
            } catch (e) {
                reconnect(reloadRB, "rank_book");
            }

        }
        ///借阅排行榜结束
    }
</script>
</html>